﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Spread Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
            initSpread(spread);
        });

        function initSpread(spread) {
            spread.newTabVisible(false);
            this.initHorizontalSparkline(spread.sheets[0], "Horizontal");
            this.initVerticalSparkline(spread.sheets[1], "Vertical");
        };

        function initHorizontalSparkline(sheet, name) {
            var c, r;

            sheet.isPaintSuspended(true);
            sheet.setName(name);

            sheet.getCell(0, 0).value("Student Grade Statistics").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);

            sheet.setArray(1, 0, [["Name", "Chinese", "Math", "English", "Physics", "Chemistry", "Total"]]);
            sheet.setColumnWidth(0, 80);
            for (c = 1; c <= 6; c++) {
                sheet.setColumnWidth(c, 90);
            }
            sheet.setRowHeight(0, 40);
            sheet.setRowHeight(2, 40);

            sheet.setArray(3, 0, [
                ["Student 1", 70, 90, 51, 107, 48],
                ["Student 2", 99, 59, 63, 100, 61],
                ["Student 3", 89, 128, 74, 156, 70],
                ["Student 4", 93, 61, 53, 132, 73],
                ["Student 5", 106, 82, 80, 152, 88],
                ["Student 6", 108, 124, 90, 174, 91],
                ["Student 7", 112, 100, 75, 156, 92],
                ["Student 8", 78, 111, 84, 161, 88],
                ["Student 9", 116, 116, 99, 165, 90],
                ["Student 10", 119, 114, 92, 182, 91],
                ["Student 11", 121, 99, 93, 161, 82],
                ["Student 12", 112, 93, 95, 74, 65],
                ["Student 13", 55, 66, 105, 97, 113],
                ["Student 14", 104, 51, 118, 56, 79],
                ["Student 15", 77, 81, 99, 51, 75],
                ["Student 16", 70, 91, 120, 120, 85],
                ["Student 17", 113, 56, 153, 106, 97],
                ["Student 18", 77, 58, 141, 88, 112],
                ["Student 19", 84, 78, 160, 122, 108],
                ["Student 20", 109, 103, 106, 49, 108],
                ["Student 21", 55, 118, 111, 64, 61],
                ["Student 22", 75, 86, 110, 92, 67],
                ["Student 23", 66, 67, 99, 114, 77],
                ["Student 24", 123, 88, 124, 124, 81],
                ["Student 25", 90, 84, 154, 68, 119],
                ["Student 26", 124, 95, 101, 68, 90],
                ["Student 27", 91, 79, 116, 56, 75],
                ["Student 28", 119, 120, 134, 89, 66],
                ["Student 29", 116, 123, 174, 65, 90],
                ["Student 30", 61, 73, 171, 90, 109],
                ["Student 31", 66, 73, 106, 92, 62],
                ["Student 32", 95, 59, 167, 69, 62],
                ["Student 33", 104, 79, 166, 46, 100],
                ["Student 34", 111, 46, 168, 84, 82],
                ["Student 35", 47, 48, 160, 102, 90],
                ["Student 36", 92, 85, 134, 103, 102],
                ["Student 37", 95, 99, 136, 83, 69],
                ["Student 38", 62, 67, 148, 119, 105],
                ["Student 39", 105, 48, 110, 71, 86],
                ["Student 40", 81, 52, 172, 89, 103]
            ]);

            for (var i = 0; i < 40; i++) {
                r = 4 + i;
                sheet.setFormula(r - 1, 6, "=Sum(B" + r + ":F" + r + ")");
            }

            for (c = 1; c <= 6; c++) {
                var columnChar = String.fromCharCode(65 + c);
                var styleType = c;
                sheet.setFormula(2, c, "=SPREADSPARKLINE(" + columnChar + "4:" + columnChar + "43,TRUE,,,"+ styleType + ",\"green\")");
            }

            sheet.addColumns(6, 1);
            sheet.addColumns(5, 1);
            sheet.addColumns(4, 1);
            sheet.addColumns(3, 1);
            sheet.addColumns(2, 1);
            sheet.addColumns(1, 1);

            sheet.addSpan(0, 0, 1, 13);
            sheet.getCells(1, 0, 1, 12).foreColor("white").backColor("Accent 4").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);

            for (c = 1; c < 12; c += 2) {
                sheet.setColumnWidth(c, 15);
            }

            sheet.isPaintSuspended(false);
        }

        function initVerticalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);
            sheet.setName(name);

            sheet.getCell(0, 0).value("Student Grade Statistics").font("20px Arial").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
            sheet.addSpan(0, 0, 1, 3);

            sheet.setColumnWidth(0, 120);
            sheet.setColumnWidth(1, 120);
            sheet.setColumnWidth(2, 120);

            sheet.setRowHeight(2, 100);

            sheet.setText(1, 0, "Style: Stacked (1)");
            sheet.setFormula(2, 0, '=SPREADSPARKLINE(Horizontal!C4:C43,TRUE,,,1,"green",TRUE)');
            sheet.setText(1, 1, "Style: Spread (2)");
            sheet.setFormula(2, 1, '=SPREADSPARKLINE(Horizontal!E4:E43,TRUE,,,2,"green",TRUE)');
            sheet.setText(1, 2, "Style: Jitter (3)");
            sheet.setFormula(2, 2, '=SPREADSPARKLINE(Horizontal!G4:G43,TRUE,,,3,"green",TRUE)');
            sheet.setRowHeight(4, 100);
            sheet.setText(3, 0, "Style: Poles (4)");
            sheet.setFormula(4, 0, '=SPREADSPARKLINE(Horizontal!I4:I43,TRUE,,,4,"green",TRUE)');
            sheet.setText(3, 1, "Style: StackedDots (5)");
            sheet.setFormula(4, 1, '=SPREADSPARKLINE(Horizontal!K4:K43,TRUE,,,5,"green",TRUE)');
            sheet.setText(3, 2, "Style: Stripe (6)");
            sheet.setFormula(4, 2, '=SPREADSPARKLINE(Horizontal!M4:M43,TRUE,,,6,"green",TRUE)');

            sheet.isPaintSuspended(false);
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 420px; border: 1px solid gray;"></div>
    </div>
</body>
</html>
